<script setup>
import { useBaseInfoStore } from '@/stores/baseInfo.js'
import { storeToRefs } from 'pinia'

const {baseInfo} = useBaseInfoStore()
    const workHeaderFn = function (data) {
      return `<div class="title"><span class="title-name">${data.companyName.value??''}</span><span class="title-sub">${ data.workPost.value??'' }</span><span class="title-time">${ data.workTime.value??''}</span></div>`
    }

    const projectHeaderFn = function (data) {
      return `<div class="title"><span class="title-name">${data.projectName.value??''}</span><span class="title-sub">${ data.projectRole.value??'' }</span><span class="title-time">${ data.projectTime.value??''}</span></div>`
    }
    const schoolHeaderFn = function (data) {
      console.log(data.schoolEndTime.value ?? '')
      return `<div class="title"><span class="title-name">${data.schoolName.value??''}</span><span class="title-sub">${ (data.schoolMajor.value??'')+' - '+data.schoolDegree.value??+'' }</span><span class="title-time">${ (data.schoolStartTime.value??'')+' - '+data.schoolEndTime.value??'' }</span></div>`
    }
    const headerMap = {
      workExperience: workHeaderFn,
      project: projectHeaderFn,
      school: schoolHeaderFn
    }
    console.log(baseInfo[0].materialList[0].width||'120px')
</script>

<template>
  <div class="pre-container">
    <div class="pre-main">
      <div class="pre-baseInfo pre-list-item">
        <!-- 左侧头像区域 -->
        <div class="pre-baseInfo-image"    v-if="baseInfo[0].materialList[0].isShow" :style="{'width':baseInfo[0].materialList[0].width+'px'||'120px','height':baseInfo[0].materialList[0].height+'px'??'120px'}">
          <el-image :src="baseInfo[0].materialList[0].url"  fit="cover"></el-image>
        </div>
        
        <!-- 右侧信息区域 -->
        <div class="pre-baseInfo-content">
          <!-- 顶部姓名和职位 -->
          <div class="pre-baseInfo-header">
            <div class="pre-baseInfo-name">{{ baseInfo[0].baseInfoList[0].value }}</div>
            <div class="pre-baseInfo-work">{{ baseInfo[0].baseInfoList[1].value }}</div>
          </div>
          
          <!-- 详细信息列表 -->
          <div class="pre-baseInfo-list">
            <div 
              class="pre-baseInfo-item" 
              v-for="(item, index) in [...baseInfo[0].baseInfoList.slice(2), ...baseInfo[0].customList]" 
              :key="index"
             
            >
              <div class="pre-baseInfo-icon" v-if="item.isShow">
                <el-icon><component :is="item.icon ||'Grid'" /></el-icon>
              </div>
              <div class="pre-baseInfo-text" v-if="item.isShow">{{ item.value }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="pre-list">
        <div class="pre-list-item" v-for="(item) in baseInfo.slice(1)" :key="item.title" >

          <div class="pre-item-content" v-if="item.isShow">
            <div class="pre-item-title">{{ item.title }}</div>
            <div class="pre-content-list">
              <div v-for="(e, index) in item.itemList" :key="index" >
                <div class="pre-content-title" v-if="e.isShow">
                  <div class="pre-content-title-text" v-html="headerMap[item.component](e.itemInfo)">
                    
                  </div>
                  <div class="pre-content-main">
                    <div  v-if="e.isShow"></div>
                    <div v-html="e.itemInfo.itemContent.value"></div>
                  </div>
                </div>
              </div>
              <div>
                <div class="pre-content"  v-if="item.isShow">
                  <div v-html="item.value"></div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<style scoped>

.pre-main {
  padding: 20px;
}

.pre-baseInfo {
  display: flex;
  gap: 20px;
}

.pre-baseInfo-image {
  border-radius: 4px;
  overflow: hidden;
}

.pre-baseInfo-image .el-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pre-baseInfo-content {
  flex: 1;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.pre-baseInfo-header {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-direction: column;
  margin-top: 40px;
}

.pre-baseInfo-name {
  font-size: 24px;
  font-weight: bolder;
  color: #cacaca;
  margin-bottom: 5px;
}

.pre-baseInfo-work {
  font-size: 16px;
  color: #bfbfbf;
}

.pre-baseInfo-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pre-baseInfo-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pre-baseInfo-icon {
  color: var(--el-color-primary);
  font-size: 16px;
}

.pre-baseInfo-text {
  font-size: 14px;
  color: #c3c3c3;
}

/* 响应式调整 */
@media (max-width: 480px) {
  .pre-baseInfo {
    flex-direction: column;
  }
  
  .pre-baseInfo-image {
    width: 100px;
    height: 100px;
    margin: 0 auto;
  }
}
.pre-list {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.pre-list-item {
  background-color: rgba(23, 23, 23, 0.5);
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.pre-list-item:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.pre-item-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.pre-item-title {
  font-size: 18px;
  font-weight: bold;
  color: #d0d0d0;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--el-color-primary);
  margin-bottom: 5px;
}

.pre-content-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pre-content-title {
  margin-bottom: 10px;
}

.pre-content-title-text {
  font-size: 16px;
  font-weight: 600;
  color: #d0d0d0;
  margin-bottom: 5px;
}

.pre-content-main {
  font-size: 14px;
  color: #d0d0d0;
  line-height: 1.6;
  /* padding: 0 20px; */
}

.pre-content {
  font-size: 14px;
  color: #d0d0d0;
  line-height: 1.6;
  /* padding:  0 20px; */
}

/* 响应式调整 */
@media (max-width: 768px) {
  .pre-list {
    gap: 20px;
  }
  
  .pre-list-item {
    padding: 15px;
  }
  
  .pre-item-title {
    font-size: 16px;
  }
  
  .pre-content-title-text {
    font-size: 15px;
  }
  
  .pre-content-main,
  .pre-content {
    font-size: 13px;
  }
}
.pre-content-main {
  font-size: 14px;
  color: #d0d0d0;
  line-height: 1.6;
  /* 新增部分 */
  overflow: hidden;
}


</style>